<template>
	<view class="content">
		<view class="firstRow">
			<view class="search">
				<u-search v-model="keyword" 
				bgColor="transparent" 
				searchIconColor='#fd4f02'
				borderColor='#fd4f02'
				 @change="getSearchBook(keyword)" 
				 :show-action="false" 
				 @blur="closeSearchItem"
				 @focus="getSearchBook(keyword)"
				 @search="search(0)"
				 @clickIcon = "search(0)"
				 
				 >
				</u-search>
			</view>
		</view>
		
		
		<!-- 联想 -->
		<!-- <u-overlay z-index="-1" :show="show" @click="show = false"> -->
	<!-- <slot scope> -->
		<view class="AssociatioPosition"  v-if="AssociationListShow" >
			
			<scroll-view :class="'AssociatioList'+' '+[false?'AssociatioList1':'']"  scroll-y>
				<view v-for="(item,index) in AssociationList" class="item">
					<!--   <view id="{{item}}" bindtap="itemtap" class="itemview">{{item}}</view> -->
					<view  v-html="item.bookName" class="AssociationListItem" @click="associationFun(item)">
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- </slot> -->
		<!-- </u-overlay> -->
		
		
		<view class="secondRow">
			<!-- 需要点击指定搜索内容 -->
		</view>
		<view class="thirdRow">
			<view class="title" @click="search(0)">
				二手教材
			</view>
			<!-- <view class="title" @click="search(1)">
				电子资料
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				//联想
				AssociationListShow: false,
				AssociationList: '',
				show:false
				// displayClass:false
			}
		},
		methods: {
			async associationFun(item){
				console.log('联想的内容被点击了',item)
				uni.showLoading({
					title: '加载中'
				})
				let header = new Object
				header.Authority = getApp().globalData.Authority
				console.log('item.id',item.id)
				let param = "?kind=0"+"&id="+item.id
				let res = await getApp().UniRequest("/twohandbook/textbook/authority/clickOne"+param,"GET",'',header)
				console.log('res333333',res);
				if (res.code == 20000){
					uni.hideLoading()
					let {data} = res.data
					let list = [data];
					console.log('list22222222',list)
					getApp().globalData.searchList = list
				}
				this.AssociationListShow=false
				uni.navigateTo({
					url: '../searchPage/searchPage?kind=0'
				})
			},
			async search(index){
				this.AssociationListShow=false
				console.log(index)
				let vm = this
				if (vm.keyword == ''){
					return
				}
				let header = new Object
				header.Authority = getApp().globalData.Authority
				let param = "?pattern="+vm.keyword+"&kind="+index
				uni.showLoading({
					title: '正在搜索'
				})
				let data = await getApp().UniRequest("/twohandbook/textbook/authority/fuzzyQuery"+param,"GET","",header)
				console.log('5555555555',data)
				uni.hideLoading()
				if (data.code == 20000){
					let list = data.data.list
					getApp().globalData.searchList = list
					if (list.length == 0){
						uni.showToast({
							title: '暂时找不到噢！',
							icon: 'error'
						})
					}else {
						uni.navigateTo({
							url: '../searchPage/searchPage?kind='+index
						})
					}
				}
				else{
					console.log('请求没有成功！')
				}
			},
			async getSearchBook(val) {
				console.log('this.keyword',this.keyword=='',typeof(this.keyword))
				
				if (this.keyword=='') {
					this.AssociationListShow = false;
					return
				}
				console.log(this.keyword);
				let Association = await getApp().UniRequest(`/twohandbook/textbook/associate?pattern=${this.keyword}`,
					"GET", "", "")
				console.log(Association)
				if (Association.code == 20000) {
					this.AssociationList = []
					// console.log(Association.data.data.length)
					for (let i = 0; i < Association.data.textbook.length && i<10; i++) {
						// console.log(Association.data[i])
						this.AssociationList.push(Association.data.textbook[i])
					}
					//console.log('this.AssociationList联想:',this.AssociationList);
					this.AssociationListShow = true;
					// this.show = true;
					// this.displayClass = true;
					// console.log(this.AssociationList)	
				}
			},
			closeSearchItem(){
				let vm = this
				console.log("被点击了")
				vm.AssociationListShow = false
				// vm.displayClass = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f7f7f7;
	}
	.content{
		position: relative;
		top: 10rpx;
		height: 1000rpx;
		.firstRow{
			display: flex;
			justify-content: center;
			z-index: 102;
			.search{
				width: 580rpx;
			}
		}
		// .overLay{
			
		// width: 100%;
		.AssociatioPosition {
			position: fixed;
			width: 755rpx;
			display: flex;
			justify-content: center;
			z-index: 101;
			font-size: 34rpx;
			.AssociatioList{
			background-color: #ffffff;
			width: 560rpx;
			border-radius: 32rpx;
			box-shadow: 0rpx 3rpx 13rpx 3rpx #888888;
				.item{
					
					.AssociationListItem{
						border-bottom: #c0c1c3 1rpx solid;
						padding: 15rpx;
					}
					.AssociationListItem:hover{
						background-color: #ccc;
					}
				}
			}
			.AssociatioList1{
				height: 690rpx;
			}
		}
		.secondRow{
			margin-top: 20rpx;
			text-align: center;
			color: #a0a3a8;
			font-size: 27rpx;
		}
		.thirdRow{
			display: flex;
			justify-content: center;
			.title{
				color: #576b95;
				margin: 20rpx 10rpx 0rpx 10rpx;
			}
		}
	}
</style>
